<template>
	<view class="">
		<view class=" " style="padding-bottom: 20px;">
			<uni-section title="客户信息" type="circle" class="">
				<view class="padding-sm " style="padding-top: 0px;">
					<view style="display: flex;" class="margin-bottom-xs">
						<view style="width: 150rpx;">学生姓名</view>
						<view style="flex: 1;">{{form.name}}</view>
					</view>
					<view style="display: flex;" class="margin-bottom-xs">
						<view style="width: 150rpx;">到期时间</view>
						<view style="flex: 1;">{{form.endDate}}</view>
					</view>
					<view style="display: flex;" class="margin-bottom-xs">
						<view style="width: 150rpx;">课程名称</view>
						<view style="flex: 1;">{{$getDictNameByValue("offline_class_name", form.offlineClassName)}}
						</view>
					</view>
				</view>
			</uni-section>
			<uni-section title="目标" type="circle" class="">
				<view>
					<view v-for="(item,index) in  form.gjzms">
						<view style="margin: 2px ;margin-top: 20rpx;" class="mubiaoTitle bg-gray  radius padding-sm">

							<text class="padding-xs radius bg-green font-12" v-if="item.type=='xw'">行为</text>
							<text class="padding-xs radius bg-yellow font-12 " style="color: #fff;"
								v-if="item.type=='nl'">能力</text>
							<text class="font-12 margin-left-xs" style="font-weight: bold;">{{ item.title }}</text>

							<view class="padding-sm" style="padding-bottom: 0px;">
								<view style="display: flex;" class="margin-bottom-xs">
									<text class="margin-right-xs juzhong">描述</text>
									<uni-easyinput v-model="item.miaosu"></uni-easyinput>
									<uni-icons type="trash" size="25" style="color: #ff8565;"
										@click="form.gjzms.splice(index,1)"></uni-icons>
								</view>
								<view style="display: flex;" class="margin-bottom-xs" v-if="item.miaosu">
									<text class="margin-right-xs juzhong">总结</text>
									<uni-easyinput v-model="item.summary"></uni-easyinput>
									<uni-icons type="trash" size="25" style="color: #ff8565;"
										@click="form.gjzms.splice(index,1)"></uni-icons>
								</view>
							</view>

						</view>
					</view>

					<view style="display: flex;" class="juzhong padding-sm">
						<button class="bg-green  cu-btn round " @click="addMubiao('xw')">添加行为目标</button>
						<button class="bg-yellow cu-btn round margin-left-lg" style="color: #fff;"
							@click="addMubiao('nl')">添加能力目标</button>
					</view>

				</view>

			</uni-section>

			<uni-section title="教研信息" type="circle" class="">

				<view class="padding-sm" style="padding-top: 0px;">

				</view>

			</uni-section>

			<uni-popup ref="dataPicker">
				<view class="bg-white padding-lg radius " style="width: 100%;">
					<uni-data-picker ref="dataPicker2" multiple placeholder="请选择数据" :map="{text:'label',value:'value'}"
						popup-title="请选择数据" :localdata="dataTree" v-model="classes" @change="onchange"
						@nodeclick="onnodeclick" @popupopened="onpopupopened" @popupclosed="onpopupclosed">
					</uni-data-picker>
				</view>

			</uni-popup>
			<uni-data-picker ref="dataPicker2" multiple placeholder="请选择数据" :map="{text:'label',value:'value'}"
				popup-title="请选择数据" :localdata="dataTree" v-model="classes" @change="onchange" @nodeclick="onnodeclick"
				@popupopened="onpopupopened" @popupclosed="onpopupclosed">
			</uni-data-picker>
		</view>
		<view style=" width: 100%; position: fixed;bottom: 0px;padding: 20rpx;" class="juzhong">
			<button @click="jiaoyan" style="width: 30%;margin-right: 5%;" class=" cu-btn d3d bg-green  round ">
				教研</button>
			<button @click="update" type="primary" style="width: 60%" class=" cu-btn  bg-blue  round ">
				保存</button>
		</view>
	</view>

</template>

<script>
	import {
		doDelete,
		doDeleteAll,
		doExportExcel,
		doUpdateOutTime,
		getGjzmsById,
		doUpdate,
		getJYPlan,
		doInsert,
		getList,
		getUnfinishedMonthlyPlanInsert
	} from "@/api/lpc/monthlyplan/LpcMonthlyPlanManagementApi";

	import {
		findTreeByid
	} from "@/api/coreLessonPreparation/source";

	import {
		isJson,
		isNull
	} from '@/utils/validate'
	import customerQuery from "@/pages/common/customerQuery/customerQuery.vue"
	import {
		formatterUserName,
		getcommon
	} from '@/utils/common'
	export default {
		components: {
			customerQuery
		},
		data() {
			return {
				dict: {},
				classes: '1-2',
				dataTree: [],
				queryFrom: {
					id_EQ: null,
				},
				typeOnchange: null,
				form: {},
				activeNames: []
			}
		},
		mounted() {
			this.dict.offline_class_name = this.$getDictList("offline_class_name");





			this.dict.status = this.$getDictList("status");
			this.dict.no_yes = this.$getDictList("no_yes");
		},
		onLoad(op) {
			if (op.id != null) {
				this.queryFrom.id_EQ = op.id
				this.init()
			}
			if (op.cid != null) {
				// this.queryFrom.id_EQ = op.id
				// this.init()

				this.form.offlineClassName = op.offlineClassName
				this.form.name = op.name
				this.form.monthly = "2021-09"
				this.form.customerId = op.cid
				this.form.customer = {
					id: op.cid,
					student: {
						name: op.name
					}
				}
				this.form.gjzms = []
			}
		},

		methods: {
			jiaoyan() {
				if (this.form.id) {
					uni.navigateTo({
						url: "/pages/lpc/monthlyplan/jiaoyan?id=" + this.form.id + "&name=" + this.form.name
					})
				}
			},
			async getTree(parentId) {
				// 来源树
				const {
					success,
					msg,
					data
				} = await findTreeByid({
					"parentId": parentId
				});
				this.dataTree = data
			},
			onnodeclick(e) {

			},
			onpopupopened(e) {
				console.log('popupopened');
			},
			onpopupclosed(e) {
				console.log('popupclosed');
			},
			onchange(e) {
				let asdf = {}
				asdf.title = e.detail.value.map(item => item.text).toString("/");
				asdf.ids = e.detail.value.map(item => item.value).toString();
				asdf.type = this.typeOnchange
				this.form.gjzms.push(asdf)
			},
			async addMubiao(type) {
				if (this.form.gjzms.length > 9) {
					uni.showToast({
						icon: "none",
						title: "目标最多只能有9个"
					})
					return
				}
				this.typeOnchange = type
				if ((this.form.offlineClassName == '13' || this.form.offlineClassName == '5')) {
					if (type == 'nl') {
						await this.getTree("1556972921840672769")
					} else {
						await this.getTree("1556972817457029121")
					}
				}

				if ((this.form.offlineClassName == '4' || this.form.offlineClassName == '12')) {
					if (type == 'nl') {
						await this.getTree("1562356832444391425")
					} else {
						await this.getTree("1562356828199755777")
					}
				}

				this.$refs.dataPicker2.show()
			},
			tiaozhuancheengjijilu(find1Id, customerId) {
				window.open("#/manageStudentKetangjilu?find1Id=" + find1Id.ids[0] + "&customerId=" + customerId)
			},
			formatterUserName(cellValue) {
				return formatterUserName(cellValue)
			},
			showMore() {
				this.$refs["customerQuery"].open(this.queryFrom);
			},
			init() {
				//查询合同信息
				this.getJYPlan()
			},

			async update(e) {
				let form2
				form2 = Object.assign({}, this.form);
				if (typeof(this.form.gjzms) != 'string' && this.form.gjzms != null) {
					form2.gjzms = JSON.stringify(this.form.gjzms)
				} else {
					form2.gjzms = this.form.gjzms
				}
				form2.summary = this.form.summary
				if (form2.offlineClassName == "2") {
					form2.nl = JSON.stringify(this.form.nl)
					form2.xw = JSON.stringify(this.form.xw)
				} else {
					form2.nl = JSON.stringify(this.form.nl)
					form2.xw = JSON.stringify(this.form.xw)
				}
				delete form2.JY
				delete form2.JYPlanList
				form2.confirmTheName = this.form.customer.student.name
				form2.izUsable = '1'
				console.log(form2);
				if (form2.id == null) {
					form2.summary = form2.summary + form2.confirmTheName
					let form3 = form2

					const {
						success,
						msg
					} = await doInsert(form3);

					uni.navigateTo({
						url: "/pages/lpc/monthlyplan/index"
					})
				} else {
					let form3 = form2

					const {
						success,
						msg
					} = await doUpdate(form2);
				}

			},

			async getJYPlan(id) {
				await this.getByid()
				await this.getGjzmsById();
				const {
					data
				} = await getJYPlan({
					id: this.queryFrom.id_EQ
				});
				this.form.JYPlanList = data
				for (const nlJy2Element of this.form.JYPlanList) {

					//没有就增加
					if (data.length == 0) {
						data.push({
							"table": nlJy2Element.table.split("/")[0],
							"list": [nlJy2Element]
						})
					} else {

						var a = false

						for (const dataElementElement of data) {
							if (dataElementElement.table == nlJy2Element.table.split("/")[0]) {
								dataElementElement.list.push(nlJy2Element)
								a = true
								break
							}
						}
						if (!a) {
							data.push({
								"table": nlJy2Element.table.split("/")[0],
								"list": [nlJy2Element]
							})

						}


					}

				}
				this.form.JYPlanList = data

				this.form.JY = data

			},

			async getGjzmsById() {
				const {
					data,
					msg,
					success
				} = await getGjzmsById({
					id: this.queryFrom.id_EQ
				})

				if (isJson(data.gjzms)) {
					this.form.gjzms = JSON.parse(data.gjzms)

				} else {
					//最老的月计划 不支持修改
					this.form.gjzms = data.gjzms
					this.form.gjzms = this.form.replace(/\n/g, "huannhang");
					this.form.gjzms = this.form.split("huannhang");

				}

			},

			async getByid() {
				const {
					data
				} = await getList(this.queryFrom);
				if (!isNull(data)) {
					this.form = data.rows[0]
					this.form.name = data.rows[0].customer.student.name
					this.form.phone = data.rows[0].customer.student.name
				}

			},


		}
	}
</script>

<style lang="scss">
	.navbar {
		width: 100%;
		background-color: #f1f1f1;
		z-index: 4;
		text-align: center;
		position: -webkit-sticky;
		position: -ms-sticky;
		position: -o-sticky;
		position: sticky;
		left: 0;
		top: 0
	}

	.mubiaoTitle {
		margin: 5rpx 0px;
	}
</style>